<script setup lang="ts">

import Card from "../../components/Card.vue";
import {NButton, NSpace} from 'naive-ui'
import ButtonComponent from "../../components/ButtonComponent.vue";
import {type Component, ref} from "vue";
import NewsList from "../../components/NewsList.vue";
import NewsInfo from "../../components/NewsInfo.vue";
import TextEnlarge from "../../components/TextEnlarge.vue";
import AlertBox from "../../components/AlertBox.vue";
import HomeTab from "../../components/HomeTab.vue";
import UserTab from "../../components/UserTab.vue";

const list = ref([
  {"title": "台风来了", "id": 100},
  {"title": "台风走人", "id": 101},
  {"title": "台风又来了", "id": 101},
]);

const count = ref(0);

const fontSize = ref(1);

const curTab = ref('home');
const tabs:Record<string, Component> = {user: UserTab, home: HomeTab};

function isCur(tab: string) {
  return curTab.value === tab ? 'cur' : '';
}


</script>

<template>
  <Card title="组件基础">
    <p>66666666</p>
    <NButton @click="count++">点击计数：{{ count }}</NButton>
  </Card>
  <Card title="引用组件">
    <n-space>
      <ButtonComponent/>
      <ButtonComponent/>
      <ButtonComponent/>
      <ButtonComponent/>
    </n-space>
  </Card>

  <Card title="传递属性">
    <ButtonComponent title="计数DEMO"/>
  </Card>

  <Card title="传递属性2--for在子组件内部渲染">
    <NewsList :list="list"/>
  </Card>
  <Card title="传递属性3--for在父组件内部渲染">
    <NewsInfo v-for="(item,index) of list" :id="item.id" :title="item.title"/>
  </Card>
  <Card title="子组件调用父组件的方法">
    <p>父元素定义通过@enlarge定义一个enlarge事件，子组件就可以通过$emit('enlarge')来调用它</p>
    <div>

      <text-enlarge title="字体放大" @enlarge="fontSize+=0.1"/>
      <p :style="{fontSize:fontSize+'em'}" class="m-3">爱马仕在美全线涨价</p>
    </div>
  </Card>

  <Card title="插槽">
    <alert-box title="警告">
      hello-world
    </alert-box>
  </Card>

  <card title="动态组件">
    <p class="tab-header"><span  :class="isCur(tab)" v-for="(item,tab) in tabs" @click="curTab=tab">{{ tab }}</span></p>
    <component :is="tabs[curTab]" class="tab-content"></component>
  </card>

</template>

<style scoped>
.tab-header{padding: 0;margin: 0}
.tab-header span{
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 3px;
  border-bottom: none;
  border-right: none;
}
.tab-header span:last-child{
  border-right: 1px solid #ccc;
}
.tab-content{
  border: 1px solid #ccc;
  padding: 10px;
}
.cur{
  background-color: #eee;
}
</style>